<h2>My heroes</h2>
<ul class="heroes">
  <!-- *ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素。 -->
  <li *ngFor="let hero of heroes" 
  [class.selected]="hero === selectedHero"
  (click)="onSelect(hero)">
  <!-- click外面的圆括号会让Angular监听这个<li>元素的click事件.当用户点击<li>时,Angular就会执行表达式 onSelect(hero)。 -->
    <span class="badge">{{hero.id}}</span>{{hero.name}}
  </li>
</ul>

<!-- [hero]="selectedHero" 是 Angular 的属性绑定语法。 -->
<!-- 这是一种单向数据绑定。从 HeroesComponent 的 selectedHero 属性绑定到目标元素的 hero 属性，
  并映射到了 HeroDetailComponent 的 hero 属性。 -->
<!-- 现在，当用户在列表中点击某个英雄时，selectedHero 就改变了。 当 selectedHero 改变时，
  属性绑定会修改 HeroDetailComponent 的 hero 属性，HeroDetailComponent 就会显示这个新的英雄。-->
<app-hero-detail [hero]="selectedHero"></app-hero-detail>